<template>
    <div class="container">
        <div class="main">
            <div class="tab" style="margin-bottom: 20px;">维修报修>报修信息</div>

            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="">
                        <el-input placeholder="请输入报修人" v-model="form.name" style="height:35px;width: 200px">
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="form.typeId" placeholder="请选择报修类型" class="myselect" clearable
                            @change="changeType">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="form.status" placeholder="请选择报修状态" class="myselect" clearable
                            @change="changeStatus">
                            <el-option label="新报修" :value="1" />
                            <el-option label="维修中" :value="2" />
                            <el-option label="已完成" :value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="serach_btn" type="primary" plain @click="getList"
                            @keyup.enter="searchEnter"><el-icon style="margin-right: 10px;">
                                <Search />
                            </el-icon>搜索</el-button>
                        <!-- <el-button class="reset_btn" type="success" plain @click="add">
                            <el-icon style="margin-right: 10px;">
                                <RefreshRight />
                            </el-icon>添加</el-button> -->
                        <el-button class="export_btn" type="success" plain @click="exportHandle">
                            <el-icon>
                                <Upload />
                            </el-icon>导出报表</el-button>
                    </el-form-item>

                </el-form>
            </div>

            <!-- <div class="filterBox" style="height: 10px;">
            </div> -->

            <div class="table_box">
                <el-table size="default" :data="list" style="width: 100%" :header-cell-style="headerCellStyle"
                    :row-style="rowClassName">
                    <el-table-column type="index" label="序号" width="60" />
                    <el-table-column prop="applicantName" label="报修人" width="90" />
                    <el-table-column prop="address" label="报修地点" width="200" />
                    <el-table-column prop="type" label="报修类型" width="200" />
                    <el-table-column prop="description" label="故障描述" min-width="170" />
                    <el-table-column prop="repairDate" label="报修时间" min-width="120" />
                    <el-table-column prop="status" label="状态" width="90">
                        <template style="display: block" #default="scope">
                            <span v-if="scope.row.status == 1" style="color: #1E9FFF;">新报修</span>
                            <span v-if="scope.row.status == 2" style="color: #ff6c37;">维修中</span>
                            <span v-if="scope.row.status == 3" style="color: #00AE0B;">已完成</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="createAt" label="报修时间" width="170" />
                    <el-table-column prop="updateAt" label="完成时间" width="170" /> -->
                    <el-table-column label="操作" width="140px">
                        <template style="display: block" #default="scope">
                            <!-- <el-button class="edit_btn" size="small" type="success"
                                @click="editBaseStudent(scope.row)">编辑
                            </el-button> -->
                            <el-button class="del_btn" size="small" type="danger" @click="deleteRepair(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
            </div>

            <div class="page_box">
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="pageSize" :current-page="page"
                        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        @size-change="changePageSize" @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
    </div>
</template>
<script>
import { httpService } from "@/utils/httpService";
import { ElConfigProvider, ElMessageBox, ElMessage, ElLoading } from "element-plus";
import { Search, RefreshRight, Upload } from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
    name: "MedicalProductIndex",
    components: { ElConfigProvider, ElMessage, Search, RefreshRight, Upload },
    data() {
        return {
            form: {
                name: "",
                address: "",
                typeId: "",
                status: "",
            },
            total: 0,
            page: 1,
            pageSize: 10,
            list: [],
            typeList: [],
        };
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getList();
        this.getTypeList()
    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getBaseStudentList();
            }
        },
        onSubmit() { },
        headerCellStyle() {
            return {
                background: '#EFF3F7',
                color: "#5B5A7E",
            };
        },
        rowClassName() {
            return {
                height: '53px',
                color: "#5B5A7E",
            };
        },

        changePageSize(size) {
            this.pageSize = size;
            this.getList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getList();
        },
        getList() {
            httpService(`/javaApi/repairInfo/v2/list/${this.page}/${this.pageSize}`, {
                applicantName: this.form.name,
                typeId: this.form.typeId ? this.form.typeId : "",
                status: this.form.status ? this.form.status : "",
            }, "get").then((data) => {
                console.log(data);
                if (data) {
                    this.list = data.list
                    this.total = data.total
                }
            })
        },
        getTypeList() {
            httpService(`/javaApi/repairTypeInfo/list/1/100`, {}, "get").then((data) => {
                if (data) {
                    this.typeList = data.list
                }
            })
        },

        changeType(value) {
            this.getList()
        },
        changeStatus(value) {
            this.getList()
        },

        deleteRepair(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/repairInfo/v2/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getList()
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },

        exportHandle() {
            httpService(`/javaApi/repairInfo/v2/exportExcel`, {}, "get").then((data) => {
                if (data) {
                    console.log(data);
                    window.open(data.message, "_blank")
                }
            })
        },
    },
};
</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    width: 100%;
    height: calc(100% - 20px);
    padding-top: 20px;
}

.main {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    background-color: #fff;
}

.app-search .el-input {
    height: 36px;
}

.serach_btn {
    width: 80px;
    height: 36px;
    background-color: #007EFF;
    border-radius: 3px;
    color: #fff;
    font-size: 15px;
    border: none;
    outline: none;
}

.reset_btn {
    width: 80px;
    height: 36px;
    border: 1px solid #007EFF;
    border-radius: 3px;
    color: #007EFF;
    background-color: #fff;
    font-size: 15px;
    outline: none;
}

.export_btn {
    width: 100px;
    height: 36px;
    /* border: 1px solid #67c23a; */
    border: 1px solid #007EFF;
    border-radius: 3px;
    /* color: #67c23a; */
    color: #007EFF;
    background-color: #fff;
    font-size: 15px;
    outline: none;
}

.serach_btn .el-icon,
.reset_btn .el-icon {
    font-size: 16px;
}


.edit_btn {
    background-color: transparent;
    color: #007EFF;
    border: none;
}

.del_btn {
    background-color: transparent;
    color: #FF0000;
    border: none;
}

.table_box {
    height: calc(100% - 140px);
    overflow-y: auto;
}

.page_box {
    border: 1px solid #E5E5EF;
    padding: 9px 16px;
}

.myselect {
    height: 35px;
    width: 200px;
}

.myselect ::v-deep .el-tooltip__trigger {
    height: 35px;
    cursor: pointer;
}

.el-select-dropdown__item {
    padding-left: 15px;
}

.el-form-item {
    margin-bottom: 15px;
}
</style>